<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>view/ViewUtil.js - sss</title>
    
    <meta name="description" content="aaaa" />
    
        <meta name="keywords" content="cccc" />
        <meta name="keyword" content="cccc" />
    
    
    
    <meta property="og:title" content="arcgis4.x 简单的操作工具"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content=""/>
    <meta property="og:site_name" content="CPC"/>
    <meta property="og:url" content="https://gitee.com/CPC1994/arcgis4.X"/>
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav class="wrap">
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EchartLayer.html">EchartLayer</a><ul class='methods'><li data-type='method' style='display: none;'><a href="EchartLayer.html#init">init</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setBaseMap">setBaseMap</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setChartOption">setChartOption</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setVisible">setVisible</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshBegin">refreshBegin</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshing">refreshing</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshEnd">refreshEnd</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#on">on</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#off">off</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setCharts">setCharts</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#createLayer">createLayer</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#removeLayer">removeLayer</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#startMapEventListeners">startMapEventListeners</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#getE3CoordinateSystem">getE3CoordinateSystem</a></li></ul></li><li></li><li><a href="LayerUtil.html">LayerUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="LayerUtil.html#lazyLoadingLayer">lazyLoadingLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyLayer">applyLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyMapImageLayer">applyMapImageLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyTileLayer">applyTileLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyFeatureLayer">applyFeatureLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applySceneLayer">applySceneLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyElevationLayer">applyElevationLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#switchLayer">switchLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#getLayerByUniqueId">getLayerByUniqueId</a></li></ul></li><li></li><li><a href="ViewUtil.html">ViewUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ViewUtil.html#flyToPosition3D">flyToPosition3D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#flyToPoint2D">flyToPoint2D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#applyMapView">applyMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeMapView">removeMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#applySceneView">applySceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeSceneView">removeSceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapStatus">getMapStatus</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMap">getMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapViewMap">getMapViewMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getSceneViewMap">getSceneViewMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getView">getView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapView">getMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getSceneView">getSceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#bind2D_3D">bind2D_3D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#switchView">switchView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#addMapSwitchEvent">addMapSwitchEvent</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeMapSwitchEvent">removeMapSwitchEvent</a></li></ul></li><li></li><li><a href="OverViewUtil.html">OverViewUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="OverViewUtil.html#updateOverview">updateOverview</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#updateOverviewExtent">updateOverviewExtent</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#remove">remove</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#switchOverview">switchOverview</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#getOverViewMapId">getOverViewMapId</a></li></ul></li><li></li><li><a href="ScaleBarUtil.html">ScaleBarUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ScaleBarUtil.html#defaultStyle">defaultStyle</a></li><li data-type='method' style='display: none;'><a href="ScaleBarUtil.html#remove">remove</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-arcgisTools.html">arcgisTools</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-arcgisTools.html#~loadAPI">loadAPI</a></li></ul></li><li><a href="module-layer_layerManage.html">layer/layerManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~switchLayers">switchLayers</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~switchLayer">switchLayer</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~lazyLoadingLayer">lazyLoadingLayer</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyLayerByUrl">applyLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyLayerByConfig">applyLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyMapImageLayerByUrl">applyMapImageLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyMapImageLayerByConfig">applyMapImageLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyTileLayerByUrl">applyTileLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyTileLayerByConfig">applyTileLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyElevationLayerByUrl">applyElevationLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyElevationLayerByConfig">applyElevationLayerByConfig</a></li></ul></li><li><a href="module-view_viewManage.html">view/viewManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~flyToPosition3D">flyToPosition3D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~flyToPoint2D">flyToPoint2D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~applyMapView">applyMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeMapView">removeMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeSceneView">removeSceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~applySceneView">applySceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapStatus">getMapStatus</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMap">getMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapViewMap">getMapViewMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getSceneViewMap">getSceneViewMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getView">getView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapView">getMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getSceneView">getSceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~bind2D_3D">bind2D_3D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~switchView">switchView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~addMapSwitchEvent">addMapSwitchEvent</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeMapSwitchEvent">removeMapSwitchEvent</a></li></ul></li><li><a href="module-widgets_widgetsManage.html">widgets/widgetsManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~addScaleBar">addScaleBar</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~removeScaleBar">removeScaleBar</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~addOverview">addOverview</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~getOverViewMapId">getOverViewMapId</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~removeOverview">removeOverview</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~switchOverview">switchOverview</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">view/ViewUtil.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>import {esri} from "../api/esriAPI";
import {arcgisEventBus} from "../arcgisEventBus";

/**
 * view逻辑操作-----------业务开发中，不允许直接调用它，如果需要，需要通过工具中向外提供接口
 * @class
 * */

export const ViewUtil = class {
  mapId = null;//mapId
  _mapStatus = true;//地图的状态,2D:true,3D:false
  _bind2D_3D = true;//是否绑定2D和3D
  _dom_2D = null;//2D的DOM对象
  _dom_3D = null;//3D的DOM对象
  _mapView = null;//mapView对象
  _sceneView = null;//mapView对象
  _map_2D = null;//2D的Map对象
  _map_3D = null;//3D的Map对象
  _eventBusMapSwitch = [];//存储地图2D/3D切换的事件集合
  /**
   * 构造函数
   */
  constructor(mapId) {
    this.mapId = mapId;
  }

  /**
   * 三维飞到指定位置
   * @param {Number} x x坐标
   * @param {Number} y y坐标
   * @param {Number} z 海拔（米）
   * @param {Number} fov 相机的视野以度为单位。 默认值：当前的视野
   * @param {Number} heading 相机的heading以度为单位。当北方是屏幕的顶部时，heading为零。它随着视图顺时针旋转而增加。角度始终在0到360度之间归一化 ，默认值:当前的视角
   * @param {Number} tilt 当从相机位置向下投射时，相机相对于表面的倾斜度。当垂直向下看表面时倾斜为零，当相机看起来与表面平行时，倾斜度为90度。
   */
  flyToPosition3D(x, y, z, fov, heading, tilt) {
    let view = this._sceneView;
    var camera = view.camera.clone();
    camera.fov = fov || camera.fov;
    camera.heading = heading || camera.heading;
    camera.tilt = tilt || camera.tilt;
    camera.position = {x, y, z}
    view.goTo(camera);
  }

  /**
   * 2维飞到指定位置
   * @param {Number} x x坐标
   * @param {Number} y y坐标
   * @param {Number} zoom 缩放比例
   * @param {Object | Number} spatialReference 坐标参考系，默认:底图参考系，允许直接书写参考系数值，也可以书写完整的参考对象
   */
  flyToPoint2D(x, y, zoom, spatialReference) {
    let view = this._mapView;
    spatialReference = spatialReference || view.spatialReference;
    if (typeof spatialReference != "object") {
      spatialReference = {wkid: spatialReference}
    }
    zoom = zoom || view.zoom;
    console.log("flyToPoint", x, y, spatialReference, zoom)
    let center = new esri.Point({x, y, spatialReference});
    view.goTo({center, zoom});
  }

  /**
   * 申请MapView对象，如果该对象存在，不在创建新的对象
   * @param {Object} map arcgis的Map对象
   * @returns {Object} arcgis的MapView对象
   */
  applyMapView(map) {
    let mapId = this.mapId;
    let container = mapId + "_2D";
    if (this._mapView &amp;&amp; document.getElementById(container)) {
      this.switchView(true);
      return this._mapView
    }
    this._dom_2D = createDOM(mapId, container);
    this._map_2D = map;
    this._mapView = new esri.MapView({map, container});
    this._mapView.ui.components = ["zoom"]; //只保留某些
    this.switchView(true)
    return this._mapView;
  }

  /**
   * 移除MapView对象，同时删除DOM节点
   * @param {String} mapId 地图的mapId
   */
  removeMapView(mapId) {
    if(this._dom_2D){
      this._mapView = null;
      removeDOM(mapId, this._dom_2D);
    }
  }


  /**
   * 申请SceneView对象，如果该对象存在，不在创建新的对象
   * SceneView支持全局场景中的以下坐标系：WGS84或WebMercator
   * @param {Object} map arcgis的Map对象
   * @returns {Object} arcgis的SceneView对象
   */
  applySceneView(map) {
    let mapId = this.mapId;
    let container = mapId + "_3D";
    if (this._sceneView &amp;&amp; document.getElementById(container)) {
      this.switchView(false);
      return this._sceneView
    }
    this._dom_3D = createDOM(mapId, container);
    this._map_3D = map;
    this._sceneView = new esri.SceneView({map, container});
    // view.ui.components = ["attribution", "navigation-toggle", "compass", "zoom"]; 去掉一些其他的UI
    this.switchView(false)
    return this._sceneView;
  }
  /**
   * 移除SceneView对象，同时删除DOM节点
   * @param {String} mapId 地图的mapId
   */
  removeSceneView(mapId) {
    if(this._sceneView){
      this._sceneView = null;
      removeDOM(mapId, this._dom_3D);
    }
  }

  /**
   * 获得地图的状态
   * @returns {boolean} 2D:true | 3D :false
   */
  getMapStatus() {
    return this._mapStatus;
  }

  /**
   * 获得地图的Map对象（会根据当前的状态，分别给2D/3D的map对象）
   * @returns {*} arcgis的map对象
   */
  getMap() {
    return this.getMapStatus() ? this.getMapViewMap() : this.getSceneViewMap();
  }
  /**
   * 获得地图的MapView的Map的对象
   * @returns {*} arcgis的MapView的Map的对象
   */
  getMapViewMap() {
    return this._map_2D;
  }
  /**
   * 获得地图的SceneView的Map的对象
   * @returns {*} arcgis的SceneView的Map的对象
   */
  getSceneViewMap() {
    return this._map_3D;
  }

  /**
   * 根据2D/3D状态，获得对应view对象
   * @returns {Object} arcgis的 (MapView对象|SceneView)
   */
  getView() {
    return this.getMapStatus() ? this.getMapView() : this.getSceneView();
  }

  /**
   * 获得mapView对象
   * @returns {Object} arcgis的 MapView对象
   */
  getMapView() {
    return this._mapView;
  }

  /**
   * 获得SceneView对象
   * @returns {Object} arcgis的 SceneView
   */
  getSceneView() {
    return this._sceneView;
  }

  /**
   * 是否绑定2D/3D的联动状态
   * @param {Boolean} status 是否绑定2D/3D的联动状态
   */
  bind2D_3D(status) {
    this._bind2D_3D = status;
  }

  /**
   * 切换2D/3D
   * @param {Boolean} status 是否是2D  2D:true,3D:false
   */
  switchView(status) {
    this._mapStatus = status;
    if (this._mapView &amp;&amp; this._sceneView) {
      if (this._bind2D_3D) {
        companion(status, this._mapView, this._sceneView);
      }
      //地图切换，发送事件总线
      arcgisEventBus.bus.$emit(arcgisEventBus.SWITCH_2D_3D + this.mapId, status);
      let showDom, hideDom;
      if (status) {
        showDom = this._dom_2D;
        hideDom = this._dom_3D;
      }
      else {
        showDom = this._dom_3D;
        hideDom = this._dom_2D;
      }
      showDom &amp;&amp; (showDom.style.width = "100%");
      hideDom &amp;&amp; (hideDom.style.width = "0")
    }
  }

  /**
   * 添加地图的2D/3D切换的监听事件
   * @param {Function} fn 事件回调的方法
   */
  addMapSwitchEvent(fn) {
    arcgisEventBus.bus.$on(arcgisEventBus.SWITCH_2D_3D + this.mapId, fn);
  }

  /**
   * 移除地图的2D/3D切换的监听事件
   * @param {Function} fn 事件回调的方法
   */
  removeMapSwitchEvent(fn) {
    arcgisEventBus.bus.$off(arcgisEventBus.SWITCH_2D_3D + this.mapId, fn)
  }
}


/**
 * 构建地图渲染的对象
 * @private
 * @param parentId 父级的id
 * @param nodeId 子节点ID
 * @returns {Object} 该节点的DOM对象
 */
function createDOM(parentId, nodeId) {
  var parentNode = document.getElementById(parentId);
  if (!parentNode.style.position) {
    parentNode.style.position = "relative";
  }
  var node = document.createElement("div")
  node.id = nodeId
  node.style.width = "100%";
  node.style.height = "100%";
  node.style.position = "absolute";
  node.style.top = "0";
  node.style.left = "0";
  parentNode.appendChild(node);
  return node;
}

/**
 * 移除指定mapId对象的DOM对象
 * @private
 * @param mapId
 * @param removeDom
 */
function removeDOM(mapId, removeDom) {
  var parentNode = document.getElementById(mapId);
  parentNode.removeChild(removeDom);
}

/**
 * 地图切换跟随----------------切换的时候触发
 * @private
 * @param {String} mapId 地图的mapId
 * @param {Boolean} is2D 2D/3D状态
 */
function companion(status, mapView, sceneView) {
  if (status) {
    mapView.viewpoint = sceneView.viewpoint;
  } else {
    sceneView.goTo(mapView.extent, {
      duration: 200,
      easing: "out-quint"
    });
  }
}
</code></pre>
        </article>
    </section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sat May 11 2019 22:54:19 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>


<script src="scripts/collapse.js" defer></script>


</body>
</html>
